<template>
    <div class="administrators">
        <div class="administrators-card">
            <div class="administrators-head">
                <Row :gutter="5">
                    <!--<Col span="3">
                        <DatePicker  clearable v-model="searchData.timeStartEnd" style="width: 100%" type="daterange" placeholder="时间筛选"></DatePicker>
                    </Col>-->
                    <Col span="3">
                        <Input clearable v-model="searchData.username" placeholder="账号" type="text"></Input>
                    </Col>
                    <Col span="3">
                        <Select clearable v-model="searchData.status" placeholder="状态">
                            <Option :value="1">正常</Option>
                            <Option :value="-1">冻结</Option>
                        </Select>
                    </Col>
                    <Col span="18">
                        <ButtonGroup style="float: right">
                            <Button type="primary" @click="addPeople"><Icon type="plus-round"></Icon> 新增管理员</Button>
                            <Button @click="searchGetList" :loading="search_loading" type="primary"><Icon type="ios-pulse-strong"></Icon> 筛 选</Button>
                        </ButtonGroup>
                    </Col>
                </Row>
            </div>
            <i-table ref="tableCsv" height="680" stripe :columns="columns" :data="data"></i-table>
            <Row type="flex" justify="center" align="middle" class="code-row-bg">
                <Col span="20">
                    <div class="pageFoot">
                        <Page @on-page-size-change="changeTiao" @on-change="changePage" :current="index" :total="total" show-elevator show-sizer :placement="'top'" :page-size="page_con" :page-size-opts="[15, 30, 50, 100, 300, 800]"></Page>
                    </div>
                </Col>
                <Col span="4">
                    <!--<Button @click="outexl" style="float: right" type="primary">导出表格</Button>-->
                </Col>
            </Row>
        </div>
        <Modal v-model="modal2" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <a>修改密码</a>
            </p>
            <div style="text-align:center">
                <Form :label-width="40">
                    <FormItem label="密码">
                        <Input type="password" clearable placeholder="请输入密码" v-model="resetPwdItems.password"></Input>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading" @click="sureCz">确定</Button>
            </div>
        </Modal>
        <Modal v-model="modal3" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <a>新增管理员</a>
            </p>
            <div class="administrators-list-formCon">
                <!--表单-->
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="70">
                    <FormItem style="margin-top:40px; " label="用户名"  prop="name">
                        <Input clearable v-model="formValidate.name" placeholder="请输入用户名"></Input>
                    </FormItem>
                    <FormItem style="margin-top:40px; " label="密 码"  prop="pwd">
                        <Input clearable  type="password" v-model="formValidate.pwd" placeholder="请输入密码"></Input>
                    </FormItem>
                    <FormItem style="margin-top:40px; " label="确认密码"  prop="repwd">
                        <Input clearable type="password" v-model="formValidate.repwd" placeholder="请再次输入密码"></Input>
                    </FormItem>
                </Form>
                <!--/表单-->
            </div>
            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading" @click="sureAdd">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "administrators",
        data(){
            return{
                columns:[
                    {
                        title: '管理员ID',
                        key: 'id',
                        align:"center",
                        width: 120,
                    },
                    {
                        title: '管理员账号',
                        key: 'username',
                        align:"center",
                        render:(h,params)=>{
                            if(!params.row.username.editStatus){
                                return h("div",
                                    [
                                        h("span",
                                            {
                                                style:{
                                                    display:"inline-block",
                                                    width:"calc(100% - 50px)"
                                                },
                                            },params.row.username.value
                                        ),
                                        h('Button', {
                                            props: {
                                                type: 'text',
                                                icon: 'edit',
                                            },
                                            on: {
                                                click: (event) => {
                                                    params.row.username.editStatus=true
                                                }
                                            }
                                        })
                                    ]
                                )
                            }else{
                                return h("div",
                                    [
                                        h("Input",
                                            {
                                                props: {
                                                    value:params.row.username.value
                                                },
                                                style:{
                                                    width:"calc(100% - 50px)"
                                                },
                                                on:{
                                                    input:(event)=>{
                                                        params.row.username.value=event
                                                    }
                                                }
                                            }
                                        ),
                                        h('Button', {
                                            props: {
                                                type: 'text',
                                                icon: 'checkmark-round'
                                            },
                                            on: {
                                                click: () => {
                                                    this.changeInfo(params.index,params.row.id,"username",params.row.username.value)
                                                }
                                            }
                                        })
                                    ]
                                )
                            }
                        }
                    },
                    /*{
                        title: '添加时间',
                        key: 'add_time',
                        align:"center",
                        render:(h,params)=>{
                            return this.timeOne(params.row.add_time)
                        }
                    },*/
                    {
                        title: '状态',
                        key: 'status',
                        align:"center",
                        render:(h,params)=>{
                            if(!params.row.status.editStatus){
                                return h("div",
                                    [
                                        h("span",
                                            {
                                                style:{
                                                    display:"inline-block",
                                                    width:"calc(100% - 50px)"
                                                },
                                            },params.row.status.value==1?'正常':'冻结'
                                        ),
                                        h('Button', {
                                            props: {
                                                type: 'text',
                                                icon: 'edit',
                                            },
                                            on: {
                                                click: (event) => {
                                                    params.row.status.editStatus=true
                                                }
                                            }
                                        })
                                    ]
                                )
                            }else{
                                return h("div",
                                    [
                                        h("Select",
                                            {
                                                props: {
                                                    value:params.row.status.value
                                                },
                                                style:{
                                                    width:"calc(100% - 50px)"
                                                },
                                                on:{
                                                    "on-change":(event)=>{
                                                        params.row.status.value=event
                                                    }
                                                }
                                            },
                                            [
                                                h("Option",{
                                                    props: {
                                                        value:"1"
                                                    },
                                                },"正常"),
                                                h("Option",{
                                                    props: {
                                                        value:"-1"
                                                    },
                                                },"冻结")
                                            ]
                                        ),
                                        h('Button', {
                                            props: {
                                                type: 'text',
                                                icon: 'checkmark-round'
                                            },
                                            on: {
                                                click: () => {
                                                    this.changeInfo(params.index,params.row.id,"status",params.row.status.value)
                                                }
                                            }
                                        })
                                    ]
                                )
                            }
                        }
                    },
                    {
                        title: '用户组',
                        key: 'wocao',
                        align:"center",
                        render:(h,params)=>{
                            if(!params.row.wocao.editStatus){
                                return h("div",
                                    [
                                        h("span",
                                            {
                                                style:{
                                                    display:"inline-block",
                                                    width:"calc(100% - 50px)"
                                                },
                                            },params.row.wocao.title
                                        ),
                                        h('Button', {
                                            props: {
                                                type: 'text',
                                                icon: 'edit',
                                            },
                                            on: {
                                                click: (event) => {
                                                    params.row.wocao.editStatus=true
                                                }
                                            }
                                        })
                                    ]
                                )
                            }else{
                                return h("div",
                                    [
                                        h("Select",
                                            {
                                                props: {
                                                    value:params.row.wocao.value==0?'':params.row.wocao.value
                                                },
                                                style:{
                                                    width:"calc(100% - 50px)"
                                                },
                                                on:{
                                                    "on-change":(event)=>{
                                                        params.row.wocao.value=event
                                                    }
                                                }
                                            },
                                            this.selectList.map((item)=>{
                                                return h('Option',{
                                                    props: {
                                                        value:item.id
                                                    },
                                                },item.title)
                                            })
                                        ),
                                        h('Button', {
                                            props: {
                                                type: 'text',
                                                icon: 'checkmark-round'
                                            },
                                            on: {
                                                click: () => {
                                                    this.changeZhu(params.row.id,params.row.wocao.value)
                                                }
                                            }
                                        })
                                    ]
                                )
                            }
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('ButtonGroup', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                    },
                                    on: {
                                        click: () => {
                                            this.resetPwdItems.admin_id=params.row.id
                                            this.modal2=true
                                        }
                                    }
                                },"修改密码"),
                            ]);
                        }
                    },
                ],
                data:[],
                total:0,
                index:1,
                page_con:15,
                searchData:{
                    timeStartEnd:"",
                    username:"",
                    status:"",
                },
                search_loading:false,
                modal2:false,
                modal_loading:false,
                admingId:"",
                selectList:[],
                modal3:false,
                formValidate:{
                    name:"",
                    pwd:"",
                    repwd:"",
                },
                ruleValidate:{
                    name: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    pwd: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    repwd: [
                        { required: true, message: '请再次输入密码', trigger: 'blur' }
                    ],
                },
                resetPwdItems:{
                    admin_id:'',
                    password:''
                }
            }
        },
        mounted(){
            this.getList()
        },
        methods:{
            //获取列表数据
            getList(){
                this.getJsonData("Auth/getAllAdmin",{
                    num:this.page_con,
                    page:this.index,
                    /*begin:this.searchData.timeStartEnd[0]?this.searchData.timeStartEnd[0]/1000:"",
                    last:this.searchData.timeStartEnd[1]?this.searchData.timeStartEnd[1]/1000:"",*/
                    username:this.searchData.username,
                    status:this.searchData.status,
                },true)
                    .then((res)=>{
                        this.data=res.data
                        this.selectList=res.group
                        this.total=parseInt(res.count)
                        this.search_loading=false
                    })
                    .catch((res)=>{
                        this.search_loading=false
                    })
            },
            searchGetList(){
                this.search_loading=true
                this.index=1
                this.getList()
            },
            changePage(n){
                this.index=n
                this.getList()
            },
            changeTiao(num){
                this.page_con=num
                this.index=1
                this.getList()
            },
            changeInfo(index,userid,methods,value){
                let obj={}
                obj[methods]=value
                obj.admin_id=userid
                this.getJsonData("Auth/changeInfo",obj,true)
                    .then((res)=>{
                        this.$Message.success("修改成功")
                        this.getList()
                    })
                    .catch(()=>{
                        this.getList()
                    })
            },
            changeZhu(userid,value){
                this.getJsonData("Auth/changeJuese",{
                    admin_id:userid,
                    group_id:value,
                },true)
                    .then((res)=>{
                        this.$Message.success("修改成功")
                        this.getList()
                    })
                    .catch(()=>{
                        this.getList()
                    })
            },
            sureCz(){
                this.modal_loading=true;
                this.getJsonData("Auth/updateAdminPwd",this.resetPwdItems,true).then((res)=>{
                    this.modal_loading=false;
                    this.modal2=false;
                    this.$Message.success(res.msg)
                    this.getList()
                }).catch((res)=>{
                    this.modal_loading=false;
                })
            },
            addPeople(){
                this.formValidate.name=""
                this.formValidate.pwd=""
                this.formValidate.repwd=""
                this.modal3=true
            },
            sureAdd(){
                this.$refs.formValidate.validate((valid) => {
                    if (valid) {
                        this.sureAddPeople()
                    } else {
                        //不做处理
                    }
                })
            },
            sureAddPeople(){
                this.modal_loading=true;
                this.getJsonData("Auth/addAdminMember",{
                    username:this.formValidate.name,
                    password:this.formValidate.pwd,
                    password_t:this.formValidate.repwd,
                },true).then((res)=>{
                    this.modal_loading=false;
                    this.modal3=false;
                    this.$Message.success(res.msg)
                    this.getList()
                }).catch((res)=>{
                    this.modal_loading=false;
                })
            }
        }
    }
</script>

<style lang="less">
    @import "./administrators";
</style>
